<template>
  <!-- 值班人员添加模态框 -->
  <el-dialog
    :title="$t('dialog.title.create_watch')"
    :visible.sync="operatorOnDutyDialog"
    width="40%"
    :before-close="closeDialog"
  >
    <span class="main"
      ><el-form
        ref="createdFormRef"
        :label-position="labelPosition"
        label-width="120px"
        style="width: 90%"
        :model="from"
        :rules="rules"
      >
        <el-form-item :label="$t('dialog.form.name')" prop="name">
          <el-input v-model="from.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('dialog.form.tel')" prop="phone_number">
          <el-input v-model="from.phone_number"></el-input>
        </el-form-item>
        <el-form-item :label="$t('dialog.form.username')" prop="auth">
          <el-input v-model="from.auth"></el-input>
        </el-form-item>
        <el-form-item :label="$t('dialog.form.password')" prop="password">
          <el-input
            type="password"
            v-model="from.password"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('dialog.form.email')" prop="email">
          <el-input v-model="from.email"></el-input>
        </el-form-item>
        <!-- <el-form-item
          :label="$t('dialog.form.type')"
          prop="website_introduction"
        >
          <el-select
            v-model="from.type"
            :placeholder="$t('dialog.form.options.select')"
          >
            <el-option
              :label="$t('dialog.form.options.val1')"
              value="1"
            ></el-option>
            <el-option
              :label="$t('dialog.form.options.val2')"
              value="2"
            ></el-option>
            <el-option
              :label="$t('dialog.form.options.val3')"
              value="3"
            ></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{ $t("dialog.btn.cancel") }}</el-button>
      <el-button type="warning" plain @click="resetForm">{{
        $t("dialog.btn.reset")
      }}</el-button>
      <el-button type="primary" @click="addPersonnel" style="width: 200px">{{
        $t("dialog.btn.create")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["operatorOnDutyDialog"],
  data() {
    // 用户名的验证规则
    var validateAuth = (rule, value, callback) => {
      // 为什么非得用+$  使用$就报错
      let authTest = /^[A-Za-z]+$/; //匹配用户名的正则表达式
      if (authTest.test(value)) {
        callback();
      } else {
        callback(new Error(this.$t("dialog.message.name_En")));
      }
    };
    return {
      labelPosition: "right",
      // 创建人员表单数据
      from: {
        type: 3,
      },
      // 验证规则
      rules: {
        name: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("dialog.message.name"),
          },
        ],
        phone_number: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("dialog.message.tel"),
          },
        ],
        email: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("dialog.message.email"),
          },
        ],
        auth: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("dialog.message.username"),
          },
          {
            min: 3,
            max: 10,
            message: this.$t("dialog.message.name_length"),
            trigger: "blur",
          },
          { validator: validateAuth, trigger: "blur" },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("dialog.message.password"),
          },
          {
            min: 6,
            max: 16,
            message: this.$t("dialog.message.psd_length"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 创建爬虫
    addPersonnel() {
      this.$refs.createdFormRef.validate((valid) => {
        if (!valid) return;
        this.$http.post("/business/employee/create", this.from).then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.$refs.createdFormRef.resetFields();
            this.$message.success("Creating a successful!");
            this.closeDialog("1");
          } else {
            this.$message.error("Create a failure!");
          }
        });
      });
    },
    resetForm() {
      this.$refs.createdFormRef.resetFields();
    },
    // 关闭弹出框
    closeDialog(t) {
      this.$emit("closeDialog", t);
    },
  },
};
</script>

<style lang='less' scoped>
</style>